<template>
  <el-row :gutter="20">
    <el-col :span="6" :offset="9" class="LoginPage">
      <el-form :model="ruleForm" :rules="rules">
        <h3 class="title">系统登录</h3>
        <el-form-item prop="account">
          <el-input type="text" v-model="ruleForm.account" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit" :loading="logining">登录</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      logining: false,
      ruleForm: {
        account: "",
        checkPass: ""
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "submit" }],
        checkPass: [{ required: true, message: "请输入密码", trigger: "submit" }]
      },
      checked: true
    };
  },
  mounted(){
     
  },
  methods: {
    handleSubmit(ev) {
      var params={
          UserName: this.ruleForm.account,
          Password:  this.ruleForm.checkPass,
      }
      var requestStr = "/api/Home/Login";
      kt.post(requestStr,params)
        .then(res => {
            if(res.Success){
              localStorage.setItem("token",res.Token);
              localStorage.setItem("IsLoginIn",true);

              this.$store.commit('changeToken', res.Token);
              this.$store.commit('Login', true);

              var userUrl = "/api/User/GetUserInfo";
              kt.post(userUrl)
                .then(res => {
                    if(res.RtnCode==1){
                      localStorage.setItem("UserInfo",res.PostData);

                      this.$store.commit('WriteUser', res.PostData);
                      this.$router.push({path: this.$route.query.redirect || "/ArticleList" });
                    }else{
                        kt.showErrorToast(res.ErrorMsg);
                    }
                })
              // this.$router.push({path: this.$route.query.redirect || "/ArticleList" });
            }else{
                kt.showErrorToast(res.Message);
            }
        })
        .catch(error => {
          kt.showErrorToast(error);
        });
    }
  }
};
</script>

<style>
.LoginPage{
  margin-top: 10%;
  border: 1px solid #cccccc;
}
</style>
